<template>
  <!-- <div class="head"> -->
    <!-- <div class="button" @click="handleClick"><a-button type="primary">Placeholder</a-button></div> -->
  <!-- </div> -->
</template>
<script lang="ts" setup>
import { FormState } from "@/components/types"
import { message } from "ant-design-vue"
// 定义存储映射
const storage: Record<string, Storage> = {
  sessionStorage,
  localStorage,
}
chrome.runtime.sendMessage("scriptLoaded", (res) => {
  // console.log(res,'scriptLoaded');
})
// 设置存储数据
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  const messageProps: { menuItemId: string; storageData: Array<FormState> } = request
  if (messageProps.menuItemId === "setStorage") {
    chrome.storage.sync.get("storageData", (storageInfo) => {
      storageInfo.storageData.forEach((item: FormState & { storageValue: string }) => {
        storage[item.storageType].setItem(item.storageKey, item.storageValue)
      })
			message.success("设置storage存储数据成功")
    })
  } else if (messageProps.menuItemId === "getStorage") {
    const newStorageData = messageProps.storageData.map((item) => {
      const storageValue = storage[item.storageType].getItem(item.storageKey)
      return {
        ...item,
        storageValue,
      }
    })
    chrome.storage.sync.set({ storageData: newStorageData }, () => {
      message.success("获取storage数据成功")
    })
  }
  sendResponse("set storage success in browser")
})
// function handleClick() {
// 	message.info('This is a fun Chrome extension.', 2)
// }
</script>
<style lang="less" scoped>
// .head {
//   color: red;
//   position: fixed;
//   z-index: 100001;
//   right: 10px;
//   bottom: 10px;
// }
</style>
